<style>
  {`
    .tip {
      display: inline-block;
      border-radius: 1em;
      font-size: 11px;
      line-height: 12px;
      font-weight: 700;
      background: #E7FDD8;
      color: #66BF3C;
      padding: 4px 12px;
      margin-right: 10px;
      vertical-align: top;
    }

    .tip-wrapper {
      font-size: 13px;
      line-height: 20px;
      margin-top: 40px;
      margin-bottom: 40px;
    }

    .tip-wrapper code {
      font-size: 12px;
      display: inline-block;
    }
  `}
</style>


# Welcome to the maxGraph Demo ✨

The demo, built with [Storybook](https://storybook.js.org/), showcases the features of `maxGraph` through interactive examples. Stories are organized by functionality, making it easy to explore different capabilities of the library.

## 🔍 What You'll Find Here

- **Feature Demonstrations**: Each story focuses on specific capabilities, from basic graph rendering to advanced interactions
- **Combination Examples**: See how multiple features work together to create powerful graph applications
- **Extension Patterns**: Learn how to extend `maxGraph` for custom requirements
- **Interactive Controls**: Many stories include [Storybook controls](https://storybook.js.org/docs/7/essentials/controls) that let you experiment with parameters in real-time

## 🚀 Continuous Improvement

We regularly add new examples that:
- Demonstrate recently added features
- Cover additional use cases
- Provide clearer documentation within the stories themselves
- Link to detailed documentation for more complex topics

## 💻 Technical Details

- Stories are being progressively migrated from _JavaScript_ to _TypeScript_
- The examples evolved from the original `mxGraph` codebase:
  - [mxGraph live examples](https://jgraph.github.io/mxgraph/javascript/index.html)
  - [mxGraph examples source](https://github.com/jgraph/mxgraph/tree/v4.2.2/javascript/examples/)
- The source code of the stories is accessible in multiple ways:
  - Within the demo via the "Code" tab in the Addon Panel ([Storysource Addon](https://www.npmjs.com/package/@storybook/addon-storysource))
  - Source of all stories in [packages/html/stories](https://github.com/maxGraph/maxGraph/tree/main/packages/html/stories/)
  - Global maxGraph configuration in [packages/html/.storybook/preview.ts](https://github.com/maxGraph/maxGraph/tree/main/packages/html/.storybook/preview.ts)
- Some stories may still be under active development

## 🤝 Support

For more details about how to use maxGraph features, see the [documentation](https://maxgraph.github.io/maxGraph/docs/intro).

If you encounter any issues, create a sub-issue under the [issue tracking all demo improvements](https://github.com/maxGraph/maxGraph/issues/505) issue.

If you have any questions or suggestions, create a new discussion on the [GitHub repository](https://github.com/maxGraph/maxGraph/discussions/categories/q-a).

<div className="tip-wrapper">
  <span className="tip">Tip</span> To edit this page, update the <code>packages/html/stories/Introduction.mdx</code> file in the <i>maxGraph</i> repository.
</div>
